<!-- <script setup>
import TheWelcome from '@/components/TheWelcome.vue'
import { useCounterStore } from '../stores/counter';
const counterStore = useCounterStore();
</script> -->

<template>
  <main>
    <!-- <TheWelcome /> -->
    <!-- 使用 store 的 actions -->
    <button @click="counterStore.increment()">{{counterStore.counter}}</button>
    <!-- 使用 patch 部分修改 -->
    <button @click="counterStore.$patch({counter: counterStore.counter - 1})">{{counterStore.counter}}</button>
  
    <!-- 使用重置方法 -->
    <button @click="counterStore.$reset">重置</button>

    <button>{{counterStore.getCount}}</button>

    <button @click="counterStore.testGetter">{{counterStore.id}}</button>

    <button>{{counterStore.countPx(10)}}</button>
  </main>
</template>

<script>
import { useCounterStore } from '../stores/counter';
export default {
  name: 'HomeView',
  components: {
    
  }, 
  setup() {
    const counterStore = useCounterStore();
    return {
      counterStore
    }
  }
}
</script>